<template>
	<div class="content">
		<el-carousel height="490px">
			<el-carousel-item v-for="item in 3" :key="item">
			</el-carousel-item>
		</el-carousel>

		<!--版权登记-->
		<div class="copyright">
			<div class="title">
				<p class="title-a">版权登记</p>
				<p class="title-b">为权利人提供贴心的一站式版权服务</p>
			</div>
			<ul class="copyright-details clear">
				<router-link tag="li" class="register" to="/copyrightregister">
					<img src="../assets/u263.png" alt="">
					<p>版权登记</p>
					<div>简单四步，享受便捷版权登记服务，维护权利人的合法权益</div>
				</router-link>

				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u265.png" alt="">
					<p>版权交易</p>
					<div>发掘版权价值，实现资产变现，突破版权行业信息交易壁垒 </div>
				</router-link>
				<router-link tag="li" class="register" to="/copyrightMonitoring">
					<img src="../assets/u261.png" alt="">
					<p>版权监测</p>
					<div>对比技术24小时全网监测，电子取证并提供侵权分析报告</div>
				</router-link>

				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u267.png" alt="">
					<p>版权维权</p>
					<div>专业维权团队，侵权问题及时处理，确保侵权网站及时下线</div>
				</router-link>
			</ul>

			<router-link to="/server">
				<button class="copyright-more">更多服务</button>
			</router-link>
		</div>
		<!--开放技术-->
		<div class="open">
			<div class=" copyright">
				<div class="title">
					<p class="title-a">开放技术</p>
					<p class="title-b">精心打造优质云产品，安全、可靠、值得信赖</p>
				</div>
				<ul class="copyright-details clear">
					<router-link to="/more" tag=li class="technology clear">

						<div class="technology-left">
							<img src="../assets/u273.png" alt="">
						</div>
						<div class="technology-right">
							<p>云服务</p>
							<div>安全可靠、高性能，打造高效IT系统</div>
						</div>
					</router-link>
					<router-link to="/more" tag="li" class="technology clear">
						<div class="technology-left">
							<img src="../assets/u303.png" alt="">
						</div>
						<div class="technology-right">
							<p>图像服务</p>
							<div>深度学习技术，精准算法模型，支持多样化图像识别</div>
						</div>
					</router-link>
					<router-link to="/more" tag="li" class="technology clear">
						<div class="technology-left">
							<img src="../assets/u275.png" alt="">
						</div>
						<div class="technology-right">
							<p>视频服务</p>
							<div>领先AI技术，多维度解析视频，输出分类标签</div>
						</div>
					</router-link>
					<router-link to="/more" tag="li" class="technology clear">
						<div class="technology-left">
							<img src="../assets/u269.png" alt="">
						</div>
						<div class="technology-right">
							<p>扫黄打非</p>
							<div>智能识别图像敏感内容，有效规避业务涉黄风险</div>
						</div>
					</router-link>
					<router-link to="/more" tag="li" class="technology clear">
						<div class="technology-left">
							<img src="../assets/u271.png" alt="">
						</div>
						<div class="technology-right">
							<p>数据采集</p>
							<div>先进无埋点数据采集技术，提高数据采集效率、准确度</div>
						</div>
					</router-link>
					<router-link to="/more" tag="li" class="technology clear">
						<div class="technology-left">
							<img src="../assets/u277.png" alt="">
						</div>
						<div class="technology-right">
							<p>舆情监测</p>
							<div>7*24全网实时监测，随时掌握监测目标网络动态</div>
						</div>
					</router-link>
				</ul>
				<router-link to="/development">
					<button class="copyright-more">更多服务</button>
				</router-link>

			</div>
		</div>
		<!--版权学堂-->
		<div class="copyright">
			<div class="title">
				<p class="title-a">版权学堂</p>
				<p class="title-b">海量资源、版权干货，学习、共享、成长</p>
			</div>
			<ul class="copyright-details clear">
				<router-link tag="li" to="/more" class="school">
					<p>版权文库</p>
					<img src="../assets/u120.png" alt="">
					<div>汇集海量版权资料，打造版权学习共享平台</div>
				</router-link>
				<router-link tag="li" to="/more" class="school">
					<p>版权百科</p>
					<img src="../assets/u122.png" alt="">
					<div>开放性的版权百科全书</div>
				</router-link>
				<router-link tag="li" to="/more" class="school">
					<p>版权法规</p>
					<img src="../assets/u118.png" alt="">
					<div>强化公众版权意识，维护版权行业正常秩序</div>
				</router-link>
			</ul>
		</div>

		<!-- 第三方应用服务-->
		<div class="copyright clear three-serverCopyright">
			<div class="title">
				<p class="title-a">第三方应用服务</p>
				<p class="title-b">为权利人提供精致的一站式版权服务</p>
			</div>
			<ul class="copyright-details three-server clear">
				<li class="server-title">法律服务</li>
				<router-link to="/more" tag="li" class="server">
					<div class="server_img">
						<img src="../assets/u301.png" alt="">
					</div>
					<p>法律咨询</p>
					<div class="server-text">版权疑问，分秒解答</div>
				</router-link>
				<router-link to="/more" tag="li" class="server">
					<div class="server_img">
						<img src="../assets/u283.png" alt="">
					</div>
					<p>法律顾问</p>
					<div class="server-text">精英团队，解决企业法律事务</div>
				</router-link>
				<router-link to="/more" tag="li" class="server">
					<div class="server_img">
						<img src="../assets/u287.png" alt="">
					</div>
					<p>维权代理</p>
					<div class="server-text">专业律师，代理民事诉讼，维护权利人合法权益。</div>
				</router-link>
			</ul>
			<ul class="copyright-details three-server clear" style="padding-left:19px">
				<li class="server-title">企业服务</li>
				<router-link tag="li" to="/more" class="server">
					<div class="server_img">
						<img src="../assets/u301.png" alt="">
					</div>
					<p>诉讼查询</p>
					<div class="server-text">企业违规查询，规避利益风险</div>
				</router-link>
				<router-link tag="li" to="/more" class="server">
					<div class="server_img">
						<img src="../assets/u283.png" alt="">
					</div>
					<p>企业信用</p>
					<div class="server-text">企业信用信息，衡量信用风险</div>
				</router-link>
				<router-link tag="li" to="/more" class="server">
					<div class="server_img">
						<img src="../assets/u287.png" alt="">
					</div>
					<p>版权评估</p>
					<div class="server-text">专业的第三方评估机构</div>
				</router-link>
			</ul>
		</div>
		<!--专业的商业合作机构-->
		<div class="open">
			<div class=" copyright">
				<div class="title">
					<p class="title-a">专业的商业合作机构</p>
				</div>
				<ul class="copyright-details clear">
					<li class="cooperation  clear">
						<img src="../assets/u116.png" alt="">
					</li>
					<li class="cooperation  clear">
						<img src="../assets/u116.png" alt="">
					</li>
					<li class="cooperation  clear">
						<img src="../assets/u116.png" alt="">
					</li>
				</ul>

			</div>
		</div>

	</div>
</template>

<script>
var timer;
export default {
    data() {
        return {
        };
    },
    methods: {
    },
    mounted() {
    },
};
</script>
<style lang="scss" scoped>

.register,
.technology {
    cursor: pointer;
}

.content {
    background-color: #fff;
	min-width: 1200px;
	.el-carousel__item:nth-child(3) {
		background: url("../assets/banner1.png") no-repeat center;
	}
	.el-carousel__item:nth-child(4) {
		background: url("../assets/banner2.png") no-repeat center;
	}
	.el-carousel__item:nth-child(5) {
		background: url("../assets/banner3.png") no-repeat center;
	}

    .copyright {
        width: 1200px;
        margin: 0 auto;
        padding: 50px 0 30px 0;
        .title {
            text-align: center;
            .title-a {
                font-size: 28px;
                font-weight: bold;
                line-height: 2;
            }
            .title-b {
                font-size: 18px;
                line-height: 2;
            }
        }

        .copyright-details {
            width: 100%;
            margin: 30px 0;
            & > li.register {
                float: left;
                width: 22%;
                height: 300px;
                background-color: #2c85cd;
                margin-right: 4%;
                text-align: center;
                color: #fff;
                padding: 0 29px;
                a {
                    color: #fff;
                }
                img {
                    display: block;
                    margin: 40px auto;
                    width: 64px;
                    height: 64px;
                }
                p {
                    font-size: 20px;
                    font-weight: 800;
                    margin-bottom: 30px;
                }
                div {
                    font-size: 15px;
                    line-height: 1.5;
                }
            }
            & > li.register:last-child {
                margin-right: 0;
            }

            & > li.technology {
                float: left;
                width: 30%;
                height: 180px;
                border: 1px solid #e9e9e9;
                background-color: #fff;
                margin: 0 5% 60px 0;

                & > .technology-left {
                    width: 80px;
                    height: 80px;
                    margin: 50px 10px 0 30px;
                    border-radius: 50px;
                    border: 1px solid #e9e9e9;
                    background-color: #fff;
                    text-align: center;
                    float: left;
                    & > img {
                        height: 50px;
                        width: 50px;
                        margin-top: 15px;
                    }
                }
                & > .technology-right {
                    padding-left: 10px;
                    padding-right: 10px;
                    height: 180px;
                    display: table-cell;
                    vertical-align: middle;
                    p {
                        font-size: 20px;
                        margin-bottom: 10px;
                        color: #333333;
                    }
                    div {
                        font-size: 15px;
                        line-height: 1.5;
                        color: #666666;
                    }
                }
            }
            & > li.technology:nth-child(3n) {
                margin-right: 0;
            }

            & > li.school {
                width: 32%;
                margin-right: 2%;
                border: 1px solid #ccc;
                float: left;
                & > p {
                    text-align: center;
                    color: #0c569a;
                    font-size: 18px;
                    line-height: 2.5;
                }
                & > img {
                    width: 100%;
                    display: block;
                }
                & > div {
                    width: 100%;
                    font-size: 14px;
                    border-top: 1px solid #ccc;
                    height: 30px;
                    line-height: 30px;
                    text-indent: 20px;
                }
            }
            & > li.school:last-child {
                margin-right: 0;
            }

            & > li.server-title {
                font-size: 20px;
                font-weight: bold;
                line-height: 3;
                color: #0c569a;
            }
            & > li.server {
                width: 180px;
                height: 180px;
                border: 1px solid #cccccc;
                float: left;
                text-align: center;
                margin-right: 20px;
                & > .server_img {
                    width: 30px;
                    height: 30px;
                    background-color: #199ed8;
                    border-radius: 50%;
                    border: 1px solid #199ed8;
                    margin: 20px auto;
                    & > img {
                        width: 24px;
                        height: 24px;
                        display: block;
                        margin: 2px auto;
                    }
                }
                & > p {
                    font-size: 16px;
                }
                & > div.server-text {
                    padding: 15px 10px 0;
                    font-size: 14px;
                    color: #666666;
                }
            }

            & > .cooperation {
                width: 350px;
                float: left;
                margin-right: 75px;
                & > img {
                    width: 100%;
                }
            }
            & > .server:last-child {
                margin-right: 0;
            }
            & > .cooperation:last-child {
                margin-right: 0;
            }
        }

        .copyright-more {
            width: 120px;
            height: 40px;
            border-radius: 20px;
            border: 1px solid #2c85cd;
            color: #2c85cd;
            background-color: #fff;
            font-size: 15px;
            margin: 0 auto;
            display: block;
            cursor: pointer;
        }
    }

    .open {
        width: 100%;
        background-color: #eef3f7;
    }
    .three-server {
        width: 50% !important;
        float: left;
    }
    .three-serverCopyright {
        width: 1200px;
    }
    .three-server {
        padding: 0px 0 15px 0;
    }
    .three-server:last-child {
        border-left: 1px solid #cccccc;
    }

    @media only screen and (max-width: 1200px) {
        .three-serverCopyright {
            width: 100%;
        }
        .three-server {
            margin: 24px auto !important;
            width: 743px !important;
            float: none;
            border-left: 0px !important;
        }
    }
}

</style>
